import React, { Component } from 'react'
import './Parent.css'
import { Child } from './Child'
import NP from 'number-precision'
export class Parent extends Component {
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场8折',
      },
    ],
  };
  kan = (id, unit) => {
    console.log(id, unit);
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          //NP.minus减法运算 toFixed保存两位小数
          price: NP.minus(item.price, unit,).toFixed(2)
        }
      }
      return item
    })
    this.setState({
      list: newList
    })

  }
  render() {
    return (
      // 父组件
      <div className="parent">
        <h1>父组件</h1>
        {/* 把下面UI抽离为子组件 */}
        {this.state.list.map((item) => (
          <Child key={item.id} item={item} kan={this.kan} />
          // <Child
          //   key={item.id}
          //   name={item.name}
          //   price={item.price}
          //   info={item.info}
          // />

          // <Child key={item.id} {...item} />
        ))}
      </div>
    )
  }
}